<template><div><p>本文档最新版为 <a href="https://learnku.com/docs/laravel/10.x" target="_blank" rel="noopener noreferrer">10.x</a>，旧版本可能放弃维护，推荐阅读最新版！</p>
<h2 id="javascript-css-脚手架" tabindex="-1"><a class="header-anchor" href="#javascript-css-脚手架"><span>JavaScript &amp; CSS 脚手架</span></a></h2>
<ul>
<li><a href="#introduction">简介</a></li>
<li><a href="#writing-css">编写 CSS</a></li>
<li><a href="#writing-javascript">编写 JavaScript</a>
<ul>
<li><a href="#writing-vue-components">编写 Vue 组件</a></li>
<li><a href="#using-react">使用 React</a></li>
</ul>
</li>
</ul>
<h2 id="简介" tabindex="-1"><a class="header-anchor" href="#简介"><span>简介</span></a></h2>
<p>虽然 Laravel 并不强制你使用哪个 JavaScript 或 CSS 预处理器，不过它提供了使用适用于许多应用场景的 <a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer">Bootstrap</a> 和 <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue</a> 的起点。默认情况下， Laravel 使用 <a href="https://www.npmjs.org/" target="_blank" rel="noopener noreferrer">NPM</a> 安装这两个前端包。</p>
<p>Laravel 提供的引导和 vue 脚手架位于 <code v-pre>laravel/ui</code> composer 包中，可以使用 composer 进行安装：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">composer <span class="token keyword">require</span> laravel<span class="token operator">/</span>ui<span class="token punctuation">:</span><span class="token operator">^</span><span class="token number">1.0</span> <span class="token operator">--</span>dev</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>安装完 <code v-pre>laravel/ui</code> 包后，可以使用 <code v-pre>ui</code> artisan 命令安装前端脚手架:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 生成基本脚手架</span></span>
<span class="line">php artisan ui bootstrap</span>
<span class="line">php artisan ui vue</span>
<span class="line">php artisan ui react</span>
<span class="line"></span>
<span class="line"><span class="token comment">// 生成 登录/注册 脚手架...</span></span>
<span class="line">php artisan ui bootstrap <span class="token operator">--</span>auth</span>
<span class="line">php artisan ui vue <span class="token operator">--</span>auth</span>
<span class="line">php artisan ui react <span class="token operator">--</span>auth</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="css" tabindex="-1"><a class="header-anchor" href="#css"><span>CSS</span></a></h4>
<p><a href="https://learnku.com/docs/laravel/6.x/mix" target="_blank" rel="noopener noreferrer">Laravel Mix</a> 提供了干净的、富有表现力的 API，用于编译 SASS 和 Less，它们能够拓展原始的 CSS，拥有向 CSS 中添加变量、mixins 和其它使 CSS 更好用的强大特性。在这篇文档中，我们将简要说明 CSS 的大体编译过程；不过，你最好翻阅完整的 <a href="https://learnku.com/docs/laravel/6.x/mix" target="_blank" rel="noopener noreferrer">Laravel Mix 文档</a> 以获取编译 SASS 和 Less 的详细信息。</p>
<h4 id="javascript" tabindex="-1"><a class="header-anchor" href="#javascript"><span>JavaScript</span></a></h4>
<p>Laravel 不要求你使用特定的 JavaScript 框架或库来构建应用。事实上，你完全可以不使用 JavaScript。但是 Laravel 包括了几个基本的脚手架，它们可以使创建基于 <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue</a> 库的现代 JavaScript 变得更容易。Vue 提供了一个极富表现力的 API，使用组件来构建健壮的 JavaScript。像 CSS 一样，可以使用 Laravel Mix 轻松将 JavaScript 组件编译到单个的、基于浏览器的 JavaScript 文件中。</p>
<h2 id="编写-css" tabindex="-1"><a class="header-anchor" href="#编写-css"><span>编写 CSS</span></a></h2>
<p>在安装 <code v-pre>laravel/ui</code> 编写器包并<a href="#introduction">生成前端脚手架</a> 之后，Laravel的 <code v-pre>package.json</code> 文件将包含 <code v-pre>bootstrap</code> 包，以帮助你开始使用 bootstrap 对应用程序的前端进行原型设计。但是你可以根据自己应用的需要，在 <code v-pre>package.json</code> 文件中，随意添加或删除依赖包。不是一定要使用 Bootstrap 框架来构建您的 Laravel 应用程序，它只是为想使用它的人提供了一个易用的起点。</p>
<p>编译 CSS 之前，请使用 <a href="https://www.npmjs.org/" target="_blank" rel="noopener noreferrer">Node 包管理器 (NPM)</a> 安装项目前端依赖：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">npm install</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>一旦已经使用 <code v-pre>npm install</code> 安装了依赖包，就可以使用 <a href="https://learnku.com/docs/laravel/6.x/mix#working-with-stylesheets" target="_blank" rel="noopener noreferrer">Laravel Mix</a> 将 SASS 编译为原生 CSS。. <code v-pre>npm run dev</code>命令将处理 <code v-pre>webpack.mix.js</code> 文件中的声明。通常编译后的 CSS 放在 <code v-pre>public/css</code> 目录中：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">npm run dev</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>Laravel 前端框架包含的 <code v-pre>webpack.mix.js</code> 文件将编译 <code v-pre>resources/sass/app.scss</code> SASS 文件。 <code v-pre>app.scss</code> 导入 SASS 变量文件并加载 Bootstrap，它为多数应用提供了一个易用的起点。 可以自由的定制 <code v-pre>app.scss</code> 文件，以通过 <a href="https://learnku.com/docs/laravel/6.x/mix" target="_blank" rel="noopener noreferrer">配置 Laravel Mix</a> 来使用你所希望的甚至完全不同的预处理器。</p>
<h2 id="编写-javascript" tabindex="-1"><a class="header-anchor" href="#编写-javascript"><span>编写 JavaScript</span></a></h2>
<p>应用所依赖的所有 JavaScript 包必须能在项目根目录的 <code v-pre>package.json</code> 文件中找到。这个文件与 <code v-pre>composer.json</code> 文件类似， <code v-pre>composer.json</code> 文件解决 PHP 的依赖关系，<code v-pre>package.json</code> 文件则解决 JavaScript 的依赖关系。使用 <a href="https://www.npmjs.org/" target="_blank" rel="noopener noreferrer">Node 包管理器 (NPM)</a>安装这些依赖包：:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">npm install</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p>Tip：默认情况下， Laravel 的 <code v-pre>package.json</code> 文件包含 <code v-pre>vue</code> 、 <code v-pre>axios</code> 等几个包，以帮助你开始构建 JavaScript 应用。可以根据应用的需要随意添加或删除 <code v-pre>package.json</code> 文件中的依赖。</p>
</blockquote>
<p>一旦安装了这些包，就可以使用 <code v-pre>npm run dev</code> 命令 <a href="https://learnku.com/docs/laravel/6.x/mix" target="_blank" rel="noopener noreferrer">编译你的资源</a>。Webpack 现代 JavaScript 应用的模块打包器。运行 <code v-pre>npm run dev</code> 命令时， Webpack 将执行 <code v-pre>webpack.mix.js</code> 文件中的指令：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">npm run dev</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>默认情况下， Laravel 的 <code v-pre>webpack.mix.js</code> 文件编译 SASS 和 <code v-pre>resources/js/app.js</code> 文件。你可以在 <code v-pre>app.js</code> 文件中注册组件，如果你喜欢利用其它框架配置自己的 JavaScript 应用。编译过的 JavaScript 通常放置在 <code v-pre>public/js</code> 目录。</p>
<blockquote>
<p>Tip： <code v-pre>app.js</code> 文件将载入 <code v-pre>resources/js/bootstrap.js</code> 文件，它负责配置和启动 Vue、 Axios、 jQuery 和其它 JavaScript 依赖。如果你想配置额外的 JavaScript 依赖，可以在这个文件内完成。</p>
</blockquote>
<h3 id="编写-vue-组件" tabindex="-1"><a class="header-anchor" href="#编写-vue-组件"><span>编写 Vue 组件</span></a></h3>
<p>当使用 <code v-pre>laravel / ui</code> 包给你的前端搭脚手架时，<code v-pre>ExampleComponent.vue</code> Vue 组件将会放置在 <code v-pre>resources/js/components</code> 目录中。 <code v-pre>ExampleComponent.vue</code> 文件是一个 <a href="https://vuejs.org/guide/single-file-components" target="_blank" rel="noopener noreferrer">单文件 Vue 组件</a> 示例，在同一个文件中定义了组件的 JavaScript 和 HTML 。单文件组件提供了构建 JavaScript 驱动应用的简便方法。这个示例组件是在 <code v-pre>app.js</code> 文件中注册的：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">Vue<span class="token operator">.</span><span class="token function">component</span><span class="token punctuation">(</span></span>
<span class="line">    <span class="token string single-quoted-string">'example-component'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token keyword">require</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'./components/ExampleComponent.vue'</span><span class="token punctuation">)</span><span class="token operator">.</span><span class="token keyword">default</span></span>
<span class="line"><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>要在应用中使用该组件，需要将其放入 HTML 模板。比如，运行 <code v-pre>php artisan ui vue --auth</code> Artisan 命令搭建应用的用户身份验证和注册页面的骨架，只要把这个组件放到<code v-pre>home.blade.php</code> Blade 模板中：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token keyword">extends</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'layouts.app'</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line">@<span class="token function">section</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">&lt;</span>example<span class="token operator">-</span>component<span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>example<span class="token operator">-</span>component<span class="token operator">></span></span>
<span class="line">@endsection</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p>Tip：切记，每次修改了 Vue 组件，都要运行 <code v-pre>npm run dev</code> 命令。也可以运行 <code v-pre>npm run watch-poll</code> 命令监视和自动重编译发生变化的组件。</p>
</blockquote>
<p>如果有进一步学习编写 Vue 组件的兴趣，可以阅读 <a href="https://vuejs.org/guide/" target="_blank" rel="noopener noreferrer">Vue 文档</a> ，它提供了整个 Vue 框架全面、易读的概述。</p>
<h3 id="使用-react" tabindex="-1"><a class="header-anchor" href="#使用-react"><span>使用 React</span></a></h3>
<p>如果更喜欢使用 React 构建 JavaScript 应用， Laravel 使得在 Vue 脚手架和 React 脚手架间切换变得非常容易。在纯净的 Laravel 应用中，可以使用带有 <code v-pre>react</code> 参数的 <code v-pre>preset</code> 命令来达到此目的：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">composer <span class="token keyword">require</span> laravel<span class="token operator">/</span>ui</span>
<span class="line"></span>
<span class="line">php artisan ui react</span>
<span class="line"></span>
<span class="line"><span class="token comment">// 生成 登录 / 注册 脚手架...</span></span>
<span class="line">php artisan ui react <span class="token operator">--</span>auth</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p>本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接<br>
我们的翻译工作遵照 <a href="https://learnku.com/docs/guide/cc4.0/6589" target="_blank" rel="noopener noreferrer">CC 协议</a>，如果我们的工作有侵犯到您的权益，请及时联系我们。</p>
</blockquote>
<hr>
<blockquote>
<p>原文地址：<a href="https://learnku.com/docs/laravel/6.x/frontend/5149" target="_blank" rel="noopener noreferrer">https://learnku.com/docs/laravel/6.x/fro...</a></p>
<p>译文地址：<a href="https://learnku.com/docs/laravel/6.x/frontend/5149" target="_blank" rel="noopener noreferrer">https://learnku.com/docs/laravel/6.x/fro...</a></p>
</blockquote>
</div></template>


